<template>
    <div>
        <div class="footer">
            <div class="content">
                <div class="logo">
                    <img :src="options.main_logo" alt="">
                    <div class="phone">
                        <p>{{ options.kf_phone }}</p>
                        <div>{{ options.kf_worktime }}</div>
                    </div>
                </div>
                <div class="list">
                    <div class="menu" v-for="i in list" :key="i.id">
                        <p>{{ i.name }}</p>
                        <ul v-if="i.id == 'ddsl'">
                            <li v-for="item in ddsl" :key="item.id">
                                <a :href="getHref({
                                    path: '/types', query: {
                                        id: item.id
                                    }
                                })" @click.prevent="goPage('/types?id=' + item.id)">{{ item.name
                                    }}</a>
                            </li>

                        </ul>
                        <ul v-if="i.id == 'ddsh'">
                            <div v-for="item in ddsh" :key="item.id" @click="openddsh(item.name)">
                                <li :class="{ active: active == item.name }">{{ item.name }} <i
                                        class="el-icon-arrow-right"></i></li>
                                <div v-if="active == item.name">
                                    <div v-for="pro in item.list" :key="pro.id">
                                        <li class="down2" v-for="a in pro.products" :key="a.id">
                                            <a :href="getHref({
                                                path: '/show', query: {
                                                    id: a.id, op: 3
                                                }
                                            })" @click.prevent="goShow(a.id, 3)">
                                                {{ a.name }}
                                            </a>
                                        </li>
                                    </div>
                                </div>
                            </div>

                        </ul>
                        <ul v-if="i.id == 'fgkj'">
                            <li v-for="item in fgkj" :key="item.id" >
                                <a :href="getHref({path:'/show',query:{id:item.id,op:2}})" @click.prevent="goShow(item.id, 2)">{{item.name}}</a>
                            </li>
                        </ul>
                        <ul v-if="i.id == 'fwzc'">
                            <li v-for="item in fwzc" :key="item.id" >
                                <a :href="getHref({path:item.path?item.path:'/show',query:{id:item.id,op:6}})" @click.prevent="goPage(item.path, i.id, item.id)">{{item.name}}</a>
                            </li>
                        </ul>
                        <ul v-if="i.id == 'gywm'">
                            <li v-for="item in gywm" :key="item.id" >
                                <a :href="getHref(getHref({ path: item.path?item.path:'/show',query:{id:0,op:item.path=='/show?id=0&op=4'?4:7 }}))" @click.prevent="goPage(item.path, i.id, item.id)">
                                    {{item.name}}
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="save">
                    <span>
                        {{ options.site_copyright }}
                    </span>
                    <a target="_blank" href="http://beian.miit.gov.cn" style="cursor: pointer;">{{ options.site_icp }}</a>
                </div>
                <div class="back" @click="top">
                    回到顶部
                </div>
                <!-- <div class="customer" v-popover:popover>
                    <img :src="options.kf_logo" alt="" v-if="options.kf_logo">
                </div> -->


            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myfooter',
    data() {
        return {
            scrollPosition: '',
            active: ''
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    computed: {
        ddsl() {
            return this.$store.state.menuList.ddsl
        },
        ddsh() {
            console.log(this.$store.state.menuList.ddsh);

            return this.$store.state.menuList.ddsh
        },
        fgkj() {
            return this.$store.state.menuList.fgkj
        },
        fwzc() {
            return this.$store.state.menuList.fwzc
        },
        gywm() {
            return this.$store.state.menuList.gywm
        },
        options() {
            return this.$store.state.dataInfo
        },
        list() {
            return this.$store.state.menuList.list
        }
    },

    beforeDestroy() {

        window.removeEventListener('scroll', this.handleScroll)
    },

    methods: {
        getHref(route) {
            const resolved = this.$router.resolve(route);
            return resolved.href;
        },
        openddsh(p) {
            if (this.active == p) {
                this.active = ''
            } else {
                this.active = p

            }
        },

        handleScroll() {
            this.scrollPosition = window.scrollY
        },
        goShow(id, op) {
            this.$router.push({
                path: '/show',
                query: {
                    id, op
                }
            })
            this.$emit('close')
        },

        goPage(url, name, id) {
            if (name == 'ddsl' || name == 'ddsh') return
            // 富贵科技
            if (name == 'fgkj') {
                this.$router.push({
                    path: '/show',
                    query: {
                        id, op: 2
                    }
                })
                this.$emit('close')
                return
            }

            // // 服务支持
            if (name == 'fwzc') {
                if (url == '/afterSale' || url == '/guide') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 6
                        }
                    })
                    this.$emit('close')
                    return
                }
            }

            if (name == 'gywm') {
                if (url == '/show?id=0&op=4' || url == '/news' || url == '/contactUs' || url == '/jobIndex') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 7
                        }
                    })
                    this.$emit('close')
                    return
                }
            }
            this.$router.push(url)
        },
        top() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.footer {
    padding: 140px 0 90px;
    background-color: #373737;
    width: 100%;
    color: #2c2424;
    position: relative;

}

.content {
    width: 1280px;
    margin: 0 auto;

    .logo {
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 326px;
            height: 95px;
        }

        .phone {
            font-weight: normal;
            font-size: 35px;
            color: #FF3701;

            p {
                margin: 0;
            }

            div {
                font-size: 23px;
            }
        }
    }

    .list {
        margin-top: 89px;
        display: flex;

        .menu {
            margin-right: 109px;

            a {
                color: #fff;
                text-decoration: none;
            }

            p {
                margin: 0 0 52px;
                font-weight: 400;
                font-size: 24px;
                color: #FFFFFF;
            }

            ul {
                padding: 0;
                margin: 0;

                li {
                    cursor: pointer;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    margin-bottom: 26px;
                }
            }
        }
    }

    .save {
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        margin-top: 60px;

        span {
            margin-right: 80px;

        }
        a{
            color: #fff;
            text-decoration: none;
        }
    }

    .back {
        position: absolute;
        right: 320px;
        bottom: 138px;
        font-weight: 500;
        font-size: 14px;
        color: #FFFFFF;
        cursor: pointer;
    }

    .customer {
        z-index: 98;
        position: fixed;
        right: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-family: MiSans;
        font-weight: 400;
        font-size: 23px;
        color: #FFFFFF;
        bottom: 100px;
        -webkit-text-stroke: 0.5px #222;
        /* 宽度 + 颜色 */
        text-stroke: 0.5px #222;

        img {
            width: 98px;
            height: auto;
            margin-bottom: 20px;
        }
    }
}

.down2 {
    opacity: .5;

    a {
        color: #fff;
        text-decoration: none;
    }
}

.active i {
    transform: rotate(90deg);
}
</style>